<template>
  <div>
    <el-container class="home_container">
      <!-- 头部区 -->
      <el-header>
        <!-- 下拉选项 -->
        <el-dropdown class="dpn" @command="logoutDialog()">
          <span class="el-dropdown-link">
            Admin<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <p :class="title" ref="hedtitle">{{ titlename }}</p>
        <div :class="navico" @click="ismenu()"></div>
        <div class="header_box">
          <img src="../assets/images/head.jpg" class="header_head" />
        </div>
      </el-header>

      <!-- 主体区 -->
      <el-container>
        <!-- 侧边栏 -->
        <!--  iscollapse为true说明折叠那么侧栏变为6px反之-->
        <el-aside :width="iscollapse ? '64px' : '200px'">
          <!-- 侧边栏菜单效果 -->
          <Menu :iscle="iscollapse"></Menu>
        </el-aside>
        <!-- 右侧内容主体 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Menu from "@/components/Menu.vue";
export default {
  components: {
    Menu, // 在这里注册使用的组件
  },
  data() {
    return {
      iscollapse: false, //是否折叠面板
      navico: "el-icon-s-fold nav_ico", //导航图标样式替换
      title: "title", //导航标题样式替换
      titlename: "车辆管理系统", //标题名
    };
  },
  methods: {
    ismenu() {
      this.iscollapse = !this.iscollapse; //取相反值是原数据是false调用就变成true，反之亦然
      this.navico = this.iscollapse
        ? "el-icon-s-unfold nav_ico"
        : "el-icon-s-fold nav_ico"; //替换图标
      if (this.iscollapse === true) {
        this.$refs.hedtitle.style.width = "64px";
        this.title = "iconfont icon-cheliang title";
        this.titlename = "";
      } else {
        this.$refs.hedtitle.style.width = "200px";
        this.title = "title";
        this.titlename = "车辆管理系统";
      }
    },
    // 退出登陆弹窗
    logoutDialog() {
      this.$confirm("是否退出登陆", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.logout()
        })
        .catch(() => {});
    },
    // 退出登陆
    logout() {
      this.$router.replace('/login')
    }
  },
};
</script>

<style  lang="less" scoped>
.home_container {
  overflow: auto;
  height: 100vh;
  .el-header {
    padding-left: 0;
    .title {
      float: left;
      width: 200px;
      height: 100%;
      line-height: 60px;
      text-align: center;
      color: rgb(245, 245, 245);
      font-weight: 500;
      font-size: 18px;
      background-color: rgb(51, 55, 68, 0.5);
      overflow: hidden;
      transition: width 0.5s;
    }
    .nav_ico {
      padding: 0px 20px;
      line-height: 60px;
      font-size: 20px;
      cursor: pointer;
    }
    .header_box {
      float: right;
      .header_head {
        margin-top: 10px;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        border: 1px solid rgb(230, 230, 230);
      }
    }
    .dpn{
        margin-left: 10px;
        margin-top: 20px;
        float: right;
        cursor: pointer;
        font-size: 12px;
      }
  }
}

.el-aside {
  background-color: #333744;
  transition: width 0.5s;
}

.el-main {
  height: 92vh;
  overflow: auto;
  background-color: #ffffff;
}
</style>